$(function () {
  const layer = layui.layer
  const laypage = layui.laypage
  let q = {
    pageNum: 1,
    pageSize: 10,
    name: ''
  }
  getDetails()
  async function getDetails() {
    const { data: { data: res } } = await axios.get('http://124.223.14.236:3001/api/recipe', {
      params: q
    })
    console.log(res.list);
    const listStr = res.list.map(item => `
      <li>
        <a href="info.html?id=${item.id}">
          <img src=" http://124.223.14.236:3001/public/${item.img}" alt="" />
          <h3 title="${item.name}">${item.name}</h3>
        </a>
      </li>
    `).join('')
    $('.list-box').html(listStr)

    renderPage(res.total)
  }




  function renderPage(total) {
    //执行一个laypage实例
    laypage.render({
      elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号
      curr: q.pageNum,
      count: total, //数据总数，从服务端得到
      limit: q.pageSize,
      limits: [10, 20, 30, 40, 50, 60],
      layout: ['count', 'limit', 'prev', 'page', 'next'],
      jump: function (obj, first) {
        console.log(obj.curr);//得到当前页，以便向服务端请求对应页的数据
        console.log(obj.limit);//得到每页显示的条数
        console.log(first);
        // 触发分页回调，修改查询条件
        q.pageNum = obj.curr
        q.pageSize = obj.limit

        // 首次不执行
        if (!first) {
          // do something
          getDetails()
        }
      }
    })
  }
})